import React, { useContext, useEffect, useImperativeHandle, useReducer, useRef, useState } from 'react'


const App = () => {

  const [proList,setProList] = useState(null)

  /*
    useEffect 有两个参数
    参数一： 是一个回调函数，该函数会在组件挂载和组件更新时调用，可以替代掉类组件中的 
          componentDidMount 和 componentDidUpdate，该回调函数中还可以设置一个
          返回值，返回值是一个函数，这个函数中可以做一些副作用的清除，可以代替掉卸载钩子

    参数二： 是一个依赖参数，只有依赖被改变的时候才会执行 useEffect 的回调，如果我们写
          [] 就相当于不添加任何依赖，那么该 useEffect 就只会被执行一次
  */ 
  useEffect(()=>{
    fetch('http://121.89.205.189:3000/api/pro/list')
    .then(res => res.json())
    .then(res => {
      console.log(res);
      setProList(res.data)
    })
  }, [])


  const [count,setCount] = useState(100)

  const timeRef = useRef(null)

  useEffect(()=>{

    // console.log(count);

    timeRef.current = setInterval(()=>{
      console.log(count);
    }, 1000)

    return ()=>{
      // 清除副作用
      // 清除副作用的函数会在下一次执行当前 useEffect 之前被调用
      clearInterval(timeRef.current)
    }
    // [配置依赖项，依赖项可以有多个]
  }, [count])

    return (
    <div >

      <button onClick={()=>{
        setCount(count + 1)
      }}> { count } 加 1</button>

      {proList && proList.map(item => {
        return <p key={item.proid}>{item.proname}</p>
      })}
    </div>
  )
}

export default App